<script setup lang="ts">
import { reactive, watch } from 'vue';


const user=reactive({
  name:'张三',
  info:{
    gender:'男',
    age:18
  }
})

// 侦听对象属性值，改写成箭头函数 返回属性值的写法
watch(()=>user.info.age,()=>{
  console.log('user.info.age')
})

// 通过参数3：开启深度侦听 { deep: true }
watch(()=>user.info,()=>{
  console.log('user.info 对象变化了，深度监听')
},{deep:true})

watch(user.info,()=>{
  console.log('user.info 对象变化了')
})

watch(()=>user.info,()=>{
  console.log('user.info 对象变化了，深度监听')
},{
  deep:true,
  immediate:true//默认执行一次
})

</script>

<template>
<p>{{ user }}</p>
<button @click="user.name='李四'">点击改名</button>
<button @click="user.info.age+=1">年龄+1</button>
</template>